<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>奖项添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <style type="text/css">
        .layui-form {
            padding: 20px;
        }

        .layui-form-item {
            width: 33.333%;
            float: left;
            margin-right: 0;
        }

        @media (max-width: 1240px) {
            .layui-form-item .layui-inline {
                width: 100%;
                float: none;
            }
        }
    </style>
</head>
<body class="childrenBody">
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 130px;">奖项类型选择:</label>
        <div class="layui-input-block" style="margin-left: 130px;">
            <select name="prizeType" lay-verify="required" id="prizeType" lay-filter="prizeType">
                <option value="1" selected="selected">优惠卷</option>
                <option value="2">卡卷</option>
                <option value="3">实体</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="div1">
        <label class="layui-form-label" style="width: 130px;">优惠卷选择:</label>
        <div class="layui-input-block" style="margin-left: 130px;">
            <select name="voucherId" lay-verify="required" id="voucherId" >
                <option value="">--请选择优惠卷--</option>
            </select>
        </div>
    </div>
        <div hidden="hidden" id="div2">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 130px;">卡卷选择:</label>
                <div class="layui-input-block" style="margin-left: 130px;">
                    <select name="cardId"  id="cardId">
                        <option value="">--请选择产品--</option>
                    </select>
                </div>
            </div>
        </div>
        <div  id="div3" hidden="hidden">
            <div class="layui-form-item" >
                <label class="layui-form-label" style="width: 130px;">实体奖项名称:</label>
                <div class="layui-input-block" style="margin-left: 130px;">
                    <input name="modelName" id="modelName" type="text" placeholder="请输入实体奖项名称" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" id="productEffective" hidden="hidden">
            <label class="layui-form-label" style="width: 130px;">有效期(月):</label>
            <div class="layui-input-block" style="margin-left: 130px;">
                <input name="productEffective" type="text" placeholder="请输入有效期" class="layui-input">
            </div>
        </div>



    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 130px;">奖项名称:</label>
        <div class="layui-input-block" style="margin-left: 130px;">
            <input name="prizeName" type="text" lay-verify="required" placeholder="请输入奖项名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 130px;">奖项数量:</label>
        <div class="layui-input-block" style="margin-left: 130px;">
            <input name="prizeCount" lay-verify="required||number" type="text" placeholder="请输入奖项数量"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="addSubscribes">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<!-- 	<script type="text/javascript" src="/js/user/newsAdd.js"></script> -->

<script type="text/javascript">
    layui.config({
        base: "/js/admin/"
    }).extend({
        $tool: 'tool'
    }).use(['form', 'layer', 'jquery', 'layedit', 'laydate', '$tool'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            laydate = layui.laydate,
            $ = layui.jquery;
        $tool = layui.$tool;
        var tem =1;

        var membersList;
        voucherList();
        form.on('select(prizeType)', function(data){
            var type = data.value;
            $("#voucherId").removeAttr("lay-verify");
            $("#cardId").removeAttr("lay-verify");
            $("#modelName").removeAttr("lay-verify");
            $("input[name='productEffective']").removeAttr("lay-verify");
            $("#div1").hide();
            $("#div2").hide();
            $("#div3").hide();
            $("#productEffective").hide();
            if(type==1){
                $("#div1").show();
                $("#voucherId").attr("lay-verify","required");
                voucherList();
            }else if(type==2){
                $("#cardId").attr("lay-verify","required");
                $("input[name='productEffective']").attr("lay-verify","required||number");
                $("#productEffective").show();
                $("#div2").show();
                productList();
            }else{
                $("#modelName").attr("lay-verify","required");
                $("input[name='productEffective']").attr("lay-verify","required||number");
                $("#productEffective").show();
                $("#div3").show();
            }
        });
        function productList(){
            $.ajax({
                type : "GET",
                url: '/categorys/getAlls',
                dataType:'json',
                async:false,
                success: function(data){
                    var cateData=data.data;
                    var html='';
                    for(var i=0;i<cateData.length;i++){
                        html+='<option disabled="disabled">'+cateData[i].category.name+'</option>';
                        var prosData=cateData[i].products;
                        for(var j=0;j<prosData.length;j++){
                            html+='<option value="'+prosData[j].id+'" projectid="'+prosData[j].categoryId+'" price="'+prosData[j].price+'">|--'+prosData[j].name+'('+prosData[j].price+'元)</option>';
                        }
                    }
                    $("#cardId").append(html);
                    form.render();
                }
            });
        }
        function voucherList(){
            $.ajax({
                type: "GET",
                url: '/voucherRepositorys/luckyCardAll',
                dataType: 'json',
                async: false,
                success: function (data) {
                    var list = data.data;
                    var html = '';
                    for (var i = 0; i < list.length; i++) {
                        html += "<option value='" + list[i].id + "'>" + list[i].name + "" + list[i].amount + "元(剩余" + list[i].quantity + ")</option>"
                    }
                    $("#voucherId").append(html);
                    form.render();
                }
            });
        }
        //创建一个编辑器
        form.on("submit(addSubscribes)", function (data) {
            var datas = data.field;
            var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
            $.ajax({
                type: "POST",
                url: "/luckydraw/add",
                data: JSON.stringify(datas),// 序列化表单值
                //   dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    if (data.code == 2000) {
                        top.layer.close(index);
                        top.layer.msg("添加成功！");
                        layer.closeAll("iframe");
                        parent.location.reload();
                    } else {
                        top.layer.close(index);
                        top.layer.msg(data.msg);
                    }
                },
                error: function (request) {
                    alert("Connection error");
                }

            });
            return false;
        })

    })

</script>
</body>
</html>

